
<div class="size_range_picker" (clickOutside)="closeFromOutside()" [clickOutsideExceptionClass]="['min','max','unit','clear','mat-option-text','mat-option']">
    <div class="main_input_block">
        <input class="main_input" type="text" [(ngModel)]="model" i18n-placeholder="@@placeholder.study_size_range"  placeholder="Study Size Range" i18n-title="@@title.size-range-picker.study_size_range_in_kb" title="Study Size Range in KB" (keyup)="keyUpMainInput()">
        <span class="size_range_icon" (click)="togglePicker()"></span>
    </div>
    <div class="picker" *ngIf="showPicker">
        <h5 i18n="@@size-range-picker.title">Set Size Range:</h5>
        <div class="input_block" (keyup)="onInputChange()">
            <div class="input_part">
                <input class="min" type="text" min="1" [(ngModel)]="value.min" i18n-placeholder="@@placeholder.min" placeholder="min"/>
                <span class="minus">-</span>
                <input class="max" type="text" min="1" [(ngModel)]="value.max" i18n-placeholder="@@placeholder.max" placeholder="max"/>
            </div>
            <mat-select class="unit" [(ngModel)]="value.unit" i18n-placeholder="@@unit" placeholder="Unit" (selectionChange)="onInputChange()">
                <mat-option value="">*</mat-option>
                <mat-option *ngFor="let option of units" value="{{option.value}}" title="{{option.description || option.title}}">{{option.text}}</mat-option>
            </mat-select>
        </div>
        <button (click)="setRange()" i18n="@@Set">Set</button>
        <button class="clear" (click)="clear()" i18n="@@Clear">Clear</button>
    </div>
</div>